<template>
  <div>
    <div style="margin: 20px 0">
      <el-button type="primary" @click="addDistributor">新增地址</el-button>
    </div>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="名称" width="120" align="center">
      </el-table-column>
      <el-table-column prop="value" label="备注" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template v-slot="scope">
          <el-button size="mini" type="text" @click="editTable(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="text" @click="deleteTable(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next, sizes, total, jumper"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      :total="this.tableData.length"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
    <!-- 添加或修改定时任务对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="distributorOpen"
      width="780px"
      :before-close="handleClose"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称" prop="cronExpression">
              <el-input v-model="form.remark" placeholder="请输入名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                placeholder="请输入备注"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
 <baidu-map
      :style="mapStyle"
      :map-click="false"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @click="getClickInfo"
      @moving="syncCenterAndZoom"
      @moveend="syncCenterAndZoom"
      @ready="onBaiduMapReady"
      @zoomend="syncCenterAndZoom"
    >
      <bm-view style="width: 100%; height: 100%;" />
      <bm-marker :position="{ lng: center.lng, lat: center.lat }" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" />
      <bm-control :offset="{ width: '10px', height: '10px' }">
        <bm-auto-complete v-model="keyword" :sug-style="{ zIndex: 999999 }">
          <input style="width:400px" v-model="keyword" type="text" placeholder="请输入地名关键字" class="mapinp" />
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </bm-auto-complete>
      </bm-control>
      <div class="getMapData">
        <div v-if="cilckShow">{{ showText }}</div>
        <div v-if="!cilckShow">
          当前地址：
          <span>{{ choosedLocation.province }}</span>
          <span>-{{ choosedLocation.city }}</span>
          <span>-{{ choosedLocation.district }}</span>
          <span v-if="choosedLocation.addr !== ''">-{{ choosedLocation.addr }}</span>
        </div>
      </div>
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" show-address-bar auto-location />
      <bm-local-search :keyword="keyword" :auto-viewport="true" :panel="false" />
    </baidu-map>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="submitLoading" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DistributorMaintenance",
  components: {},
  props: {},
  data() {
    return {
      rules: {},
      title: "新建",
      pagesize: 10,
      currpage: 1,
      submitLoading: false,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: "0",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: "0",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: "0",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: "0",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: "1",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: "1",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: "1",
        },
      ],
      distributorOpen: false,
      form: {
      },
     keyword: '', // 地区搜索的信息
     BMap: null, // 地图组件是否就绪
      mapStyle: {
        width: '100%',
        height: 400 + 'px',
        position: 'relative',
      },
      showText: '请选取位置坐标',
      center: { lng: 116.404, lat: 39.915 },
      choosedLocation: { province: '', city: '', district: '', addr: '' },
      zoom: 12,
      cilckShow: true
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {
   
  },
  beforeDestroy() {},
  methods: {
    // ready事件：在你需要二次开发或手动控制其子组件，可以使用在此事件中使用返回的 BMap 类和 map 实例进行手动控制
    onBaiduMapReady(e) {
      console.log('返回BMap类和map实例', e)
      const that = this
      this.BMap = e.BMap
      if (this.BMap) {
        // 获取定位地址信息并赋值给声明变量
        // Geolocation 对象的 getCurrentPosition()、watchPosition()、clearWatch() 方法详解 ：https://blog.csdn.net/zyz00000000/article/details/82774543
        const geolocation = new this.BMap.Geolocation()
        // 通过 getCurrentPosition() 方法：获取当前的位置信息
        geolocation.getCurrentPosition(res => {
          console.log('返回详细地址和经纬度', res)
          const { lng, lat } = res.point
          const { province, city, district, street, street_number } = res.address

          that.center = { lng, lat }
          that.choosedLocation = { province, city, district, addr: street + street_number, lng, lat }
        })
      }
    },

    /** *
     * 地图点击事件。
     */
    getClickInfo(e) {
      // 调整地图中心位置
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
      this.cilckShow = true

      // 此时已经可以获取到BMap类
      if (this.BMap) {
        const that = this
        // Geocoder() 类进行地址解析
        // 创建地址解析器的实例
        const geoCoder = new this.BMap.Geocoder()
        // getLocation() 类--利用坐标获取地址的详细信息
        // getPoint() 类--获取位置对应的坐标
        geoCoder.getLocation(e.point, function(res) {
          that.cilckShow = false
          that.showText = '正在获取地理位置请稍等...'
          console.log('获取经纬度', e.point, '获取详细地址', res)
          const addrComponent = res.addressComponents
          const surroundingPois = res.surroundingPois
          const province = addrComponent.province
          const city = addrComponent.city
          const district = addrComponent.district
          let addr = addrComponent.street
          if (surroundingPois.length > 0 && surroundingPois[0].title) {
            if (addr) {
              addr += `-${surroundingPois[0].title}`
            } else {
              addr += `${surroundingPois[0].title}`
            }
          } else {
            addr += addrComponent.streetNumber
          }
          that.choosedLocation = { province, city, district, addr, ...that.center }
          console.log(that.choosedLocation)
        })
      }
    },

    syncCenterAndZoom(e) {
      // 返回地图当前的缩放级别
      this.zoom = e.target.getZoom()
    },
    handleClose() {
      this.distributorOpen = false;
    },
    // 弹框取消
    cancel() {
      this.distributorOpen = false;
    },
    // 弹框提交
    submitForm() {},
    addDistributor() {
      console.log("新建");
      this.distributorOpen = true;
    },
    deleteTable(val) {
      console.log(val, "删除");
    },
    resetPassword(val) {
      console.log(val);
    },
    editTable(val) {
      this.distributorOpen = true;
      this.title = "编辑";
    },

    // 切换页 方法
    handleCurrentChange(cpage) {
      this.currpage = cpage;
    },
    handleSizeChange(psize) {
      this.pagesize = psize;
    },
  },
};
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 398px;
}
.bm-view {
  width: 100%;
  height: 300px;
}
.mapinp {
  border: 1px solid #1890ff;
  border-radius: 5px;
  margin-left: 10px;
  margin-top: 8px;
  font-size: 14px;
  height: 29px;
  line-height: 29px;
  padding-left: 10px;
}
.mapinp:focus {
  border: 1px solid #1890ff;
  border-radius: 5px;
  margin-left: 10px;
  margin-top: 8px;
  font-size: 14px;
  height: 29px;
  line-height: 29px;
  padding-left: 10px;
}
.getMapData {
  position: absolute;
  top: 8px;
  right: 9px;
  background: #fff;
  color: #1890ff;
  width: 300px;
  max-width: 300px;
  padding: 10px 20px;
  padding-left: 19px;
  border-radius: 7px;
  border: 1px solid #1890ff;
}
.serachinput {
  width: 300px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #dddee1;
  line-height: 20px;
  font-size: 16px;
  height: 38px;
  color: #333;
  position: relative;
  border-radius: 4px;
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
}
</style>
